<template>
  <div>
    <header>
      <section class="itemTop">
        <DeviceDetails :deviceId="deviceId" />
      </section>
      <img src="../assets/top.png" alt="Header Image" />
    </header>
    <section class="container">
      <button class="back-button" @click="goBack">
        <img src="../assets/back.png" alt="Back Button" />
      </button>
      <section class="itemLeft">
      </section>
      <section class="itemCenter">
        <ItemPage><DeviceRealtime :deviceId="deviceId" /></ItemPage>
      </section>
      <section class="itemRight">
        <ItemPage><weekAndMonthConsumption :deviceId="deviceId"/></ItemPage>
      </section>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import ItemPage from "@/components/itemPage.vue";
// import DeviceAppearance from "@/components/deviceAppearance.vue";
import DeviceDetails from "@/components/deviceDetails.vue";
import DeviceRealtime from "@/components/deviceRealtime.vue";
// import DeviceHistory from "@/components/deviceHistory.vue";
import weekAndMonthConsumption from "@/components/weekAndMonthConsumption.vue";

const route = useRoute();
const router = useRouter();
const deviceId = ref(route.query.deviceId);

const goBack = () => {
  router.go(-1);
};

onMounted(() => {
  console.log("deviceId", deviceId.value);
  if (!deviceId.value) {
    console.error("设备ID未传递");
  }
});
</script>

<style less>
header {
  height: auto;
  width: 100%;
  position: relative; /* 使内部元素相对于header定位 */
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 禁用滚动 */
}
body {
  background-image: url("../assets/pageBg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column; /* 使内容垂直方向排列 */
}

.container {
  display: flex;
  flex: 1; /* 占满剩余空间 */
  flex-wrap: wrap; /* 允许容器内部项目换行 */
  padding: 0.125rem 0.125rem 0;
  height: 100%;
  position: relative; /* 为了定位返回按钮 */
}
img {
  max-width: 100%;
  height: auto;
  position: absolute;
  width: 100%;
  height: 100%;

}
.itemTop {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0; /* 将itemTop固定在header的顶部 */
  left: 0;
  right: 0;
  z-index: 1; /* 确保itemTop在img之上 */
}
.itemLeft,
.itemCenter,
.itemRight {
  flex: 1 1 100%;
}
@media (min-width: 600px) {
  .container {
    flex-wrap: nowrap;
  }
  .itemLeft,
  .itemRight {
    flex: 3.5;
  }

  .itemCenter {
    flex: 5;
  }
}
.back-button {
  position: absolute;
  left: 20px; /* 调整按钮的位置 */
  border: none;
  cursor: pointer;
  height: 60px; /* 调整按钮的高度 */
  width: 60px; /* 调整按钮的宽度 */
  border-radius: 50%; /* 圆形按钮 */
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 50%; /* 调整按钮图像的大小 */
    height: 50%; /* 调整按钮图像的大小 */
  }
}
.itemRight{
  height: 100px;
  margin-top: 30px;
}
</style>